<template>
  <div>
    <div class="box-header">
      <div class="box-img">
        <el-tooltip effect="dark" content="该listing有图文(图文介绍)" placement="top">
          <el-tag color="#e62d06" v-if="row.originAPlus">A+</el-tag>
        </el-tooltip>
        <text-convert-img :src="row.thumbnail" :width="78" :height="78" :text="row.title" />
      </div>
      <div class="text">
        <el-tooltip effect="dark" placement="top">
          <template #content><div style="width: 400px" v-text="row.title"></div></template>
          <div class="overflow-hidden overflow-ellipsis" v-text="row.title"></div>
        </el-tooltip>
        <div class="label-container">
          <span class="label-left basis-0">原AISN:</span>
          <span v-text="row.originAsin"></span>
          <a class="ml-1 flex" :href="row.originUrl" target="_blank"><iconpark-icon name="amazon"></iconpark-icon></a>
        </div>
        <div class="label-container">
          <span class="label-left basis-0">原品牌:</span><span v-text="row.originBrand"></span>
        </div>
        <div class="label-container">
          <span class="label-left basis-0">新品牌:</span><span v-text="row.saleBrand"></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  row: {
    type: Object,
    default: () => {
      return {
        title: '',
        brand: '',
        pcode: '',
        code: '',
        name: '',
        imgUrl: '',
        url: '',
      }
    },
  },
})
import TextConvertImg from '@/plugins/pair/text-convert-img.vue'
</script>
<style scoped lang="scss">
.box-header {
  display: flex;
  position: relative;
  align-items: flex-end;
  .text{
    flex: 1;
    .overflow-hidden{
      line-height: 18px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      margin-bottom: 5px;
    }
  }
  .label-container {
    font-size: 12px;
  }
}
</style>
